<template>
  <el-dialog title="确认打印文件" :visible.sync="dialogVisible" :before-close="handleClose">
    <el-table :data="list" style="width: 100%" @select="selectChange" @select-all="selectChange">
      <el-table-column type="selection" width="50" :selectable="selectable"></el-table-column>
      <el-table-column prop="name" label="名称">
        <template slot-scope="scope">
        	<el-tooltip effect="dark" content="文件已加密" placement="top-start" v-if="scope.row.isEncryption == 1">
        		<span class="main_co pointer">{{ scope.row.name }}</span>
        		<i class="el-icon-lock warn_f ml10 f18"></i>
        	</el-tooltip>
        	<span class="main_co pointer" v-else @click="preContent(scope.row, '4')">{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <el-button plain size="small" @click="pre(scope.row)" v-if="scope.row.isSystemCover==1">封面预览</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div slot="footer" class="pub_left"><el-button type="primary" size="small" @click="handlerPrint()">确认打印</el-button></div>
    <pdf :pdfUrl="src" ref="pdf"></pdf>
  </el-dialog>
</template>

<script>
import pdf from '../pdf/index.vue';
import { PDFDocument } from 'pdf-lib';
const printJs = require('print-js');
export default {
  components: {
    pdf
  },
  props: {
    detail: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  watch: {
    detail: {
      handler(val) {
        this.list = val.guifanFileList.concat(val.jiluFileList);
      },
      deep: true
    }
  },
  data() {
    return {
      src: '',
      dialogVisible: false,
      list: [],
      printable: []
    };
  },
  methods: {
	  selectable(row, index) {
	  	return row.isEncryption == 1 ? false : true;
	  },
    selectChange(selection) {
      this.printable = selection;
      console.log(this.printable);
    },
    pre(item) {
      if (item.templateCover) {
        this.src = item.templateCover;
        this.$refs.pdf.open();
      }
    },
    init() {
      this.dialogVisible = true;
    },
    async handlerPrint() {
      if (this.printable.length == 0) {
        this.$message.error('请选择要打印文件!');
        return;
      }
	  let printable = [];
	  for (let i = 0; i < this.printable.length; i++) {
	  	let item = this.printable[i];
	  	if (item.isSystemCover == 1) {
	  		printable.push(item.templateCover);
	  	}
	  	if (item.pdfTemplateFileBeifen) {
	  		printable.push(item.pdfTemplateFileBeifen);
	  	}else if(item.pdfTemplateFile){
			printable.push(item.pdfTemplateFile);
		}
	  }
      if (printable.length != 0) {
        const mergedPdf = await PDFDocument.create();
        for (const pdfCopyDoc of printable) {
          const pdfBytes = await fetch(pdfCopyDoc).then(res => res.arrayBuffer());
          const pdf = await PDFDocument.load(pdfBytes);
          const copiedPages = await mergedPdf.copyPages(pdf, pdf.getPageIndices());
          copiedPages.forEach(page => {
            mergedPdf.addPage(page);
          });
        }
        const mergedPdfFile = await mergedPdf.save();
        const blob = new Blob([mergedPdfFile], { type: 'application/pdf' });
        const url = window.URL.createObjectURL(blob);
        try {
          printJs({
            printable: url,
            type: 'pdf'
            // targetStyles:['*']
          });
        } catch (e) {
          console.log(e);
        }
      } else {
        this.$message.error('当前选中文件缺少必要内容,请确认!');
      }
    }
  }
};
</script>

<style scoped="scoped">
.item {
  width: 154px;
}

.item .active {
  border: 2px solid #126bc9;
  position: relative;
  width: 154px;
  height: 218px;
}

.item .icon {
  position: absolute;
  right: 10px;
  top: 10px;
}
</style>
